<template>
  <div>
    EditGood.vue.vue编辑页
    <el-tabs type="border-card" v-model="activeName">
      <el-tab-pane label="基础信息" name="first">
        <el-form ref="form" :model="form" label-width="100px">
          <el-form-item label="所属分类">
            <el-select v-model="form.category_id" placeholder="请选择所属分类">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 所属分类 -->

          <el-form-item label="商品名称">
            <el-input
              v-model="form.name"
              placeholder="商品名称"
              style="width: 240px"
              size="medium"
            ></el-input>
          </el-form-item>
          <!-- 商品名称 -->

          <el-form-item label="所属品牌">
            <el-select v-model="form.brand_id" placeholder="请选择所属品牌">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- 所属品牌 -->

          <el-form-item label="商品简介">
            <el-input
              type="textarea"
              v-model="form.goods_brief"
              style="width: 30%"
            ></el-input>
          </el-form-item>
          <!-- 商品简介 -->

          <el-form-item label="商品图片">
            <el-upload
              class="avatar-uploader"
              action=""
              :show-file-list="false"
              :http-request="uploadhttp"
            >
              <img
                v-if="form.primary_pic_url"
                :src="form.primary_pic_url"
                class="avatar"
              />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div class="pictitle">推荐图片尺寸：750*420</div>
          </el-form-item>
          <!-- 商品图片 -->

          <el-form-item label="轮播图图片">
            <el-upload
              action=""
              list-type="picture-card"
              :http-request="uploadhttp2"
              :file-list="form.gallerys"
            >
              <i class="el-icon-plus"></i>
            </el-upload>

            <el-dialog>
              <img width="100%" :src="form.list_pic_url" alt="" />
            </el-dialog>
          </el-form-item>
          <!-- 轮播图图片 -->

          <el-form-item label="商品单位">
            <el-input
              v-model="form.goods_unit"
              style="width: 240px"
              size="medium"
            ></el-input>
          </el-form-item>
          <!-- 商品单位 -->

          <el-form-item label="商品库存">
            <el-input
              v-model="form.goods_number"
              style="width: 240px"
              size="medium"
            ></el-input>
          </el-form-item>
          <!-- 商品库存 -->

          <el-form-item label="商品售价">
            <el-input
              v-model="form.retail_price"
              style="width: 240px"
              size="medium"
            ></el-input>
          </el-form-item>
          <!-- 商品售价 -->

          <el-form-item label="推荐类型">
            <el-checkbox
              label="新品"
              v-model="is_new"
              @change="form.is_new = is_new ? 1 : 0"
              name="type"
            >
            </el-checkbox>

            <el-checkbox
              label="人气"
              v-model="is_hot"
              name="type"
              @change="form.is_hot = is_hot ? 1 : 0"
            ></el-checkbox>
          </el-form-item>
          <!-- 推荐类型 -->

          <el-form-item label="上架">
            <el-switch
              v-model="is_delete"
              @change="form.is_delete = is_delete ? 1 : 0"
            ></el-switch>
          </el-form-item>
          <!-- 上架 -->

          <el-form-item label="排序">
            <el-input
              v-model="form.sort_order"
              style="width: 240px"
              size="medium"
            ></el-input>
          </el-form-item>
          <!-- 排序 -->

          <el-form-item>
            <el-button type="primary" @click="onSubmit">确认保存</el-button>
            <el-button @click="$router.back()">取消</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 基础页------------------------------------------------- -->

      <el-tab-pane label="商品属性" name="second">
        <el-button type="primary" size="medium" @click="addset"
          >添加商品属性</el-button
        >
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column  label="参数名称">
            <template slot-scope="scope">
             <el-select v-model="scope.row.attribute_id" placeholder="请选择属性">
              <el-option
                v-for="item in options3"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            </template>
          </el-table-column>

          <el-table-column label="参数值">
            <template slot-scope="scope" >
              <el-input v-model="scope.row.value" size="medium"></el-input>
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index)"
                >删除</el-button
              >
            </template>
          </el-table-column>

        </el-table>
      </el-tab-pane>
      <!-- 商品属性页 -->
      <el-tab-pane label="商品详情" name="third"> 
        
        
        
        
        角色管理 </el-tab-pane>
      <!-- 商品详情页 -->
    </el-tabs>
  </div>
</template>

<script>
import {
  PostAdminUploadGoodNewPicApi,
  getCategoryApi,
  getAdminBrandApi,
  AdminGoodsStoreApi,
  getAdminGoodsApi,
  GetAdminGoodsInfoApi,
  getAttributeApi,
} from "../../request/httpaip";
export default {
  data() {
    return {
      // 标签页选中
      activeName: "first",
      // 所属分类
      options1: [],
      // 所属品牌
      options2: [],
      // 品牌显示的条数
      Brandsize: 0,
      // 分类数据
      Categorylist: [],
      // 品牌数据
      Brandlist: [],
      //
      is_new: false,
      is_hot: false,
      is_delete: false,

      //表单数据
      //使用新对象上传参数0-1
      form: {
        //分类id
        category_id: "",
        // 商品名称
        name: "",
        // 品牌id
        brand_id: "",
        // 商品数量
        goods_number: "",
        // 商品简介
        goods_brief: "",
        //排序
        sort_order: "",
        //上架 （0：上架，1：下架）
        is_delete: false,
        //新品1（1：新品）
        is_new: false,
        //人气 1（人气）
        is_hot: false,
        // 商品单位套（单位）
        goods_unit: "",
        // 105（价格）
        retail_price: 105,
        //显示的商品图片
        primary_pic_url: "",
        //显示的轮播图图片图片
        list_pic_url: "",
        //轮播图空数组
        gallerys: [],
        
      },
      //----------------基础页---------------------------------

        // 添加属性列表
        tableData: [],
       
        // 属性显示条数
        Attributesize: 0,
        // 所属属性列表
        options3: [],
    };
  },
  methods: {
    // 保存事件
    onSubmit() {
      console.log("submit!");
      AdminGoodsStoreApi({
        id: this.$route.query.id,
        ...this.form,
        attribute:this.tableData,
      }).then((res) => {
        this.$message({
          message: "成功保存数据",
          type: "success",
          
        });
        this.$router.back();
      });
    },
    // 商品图片获取事件
    uploadhttp(data) {
      console.log(data.file);
      let form = new FormData();
      form.append("good_pic", data.file);
      // 转换成formdata 格式请求  good_pic 键名 , 值data.file
      PostAdminUploadGoodNewPicApi(form).then((res) => {
        //
        if (res.errno === 0) {
          this.form.primary_pic_url = res.data.fileUrl;
        }
        console.log(this.form.primary_pic_url);
      });
    },
    // 轮播图片获取事件
    uploadhttp2(data) {
      console.log(data.file);
      let form = new FormData();
      form.append("good_pic", data.file);
      // 转换成formdata 格式请求  good_pic 键名 , 值data.file
      PostAdminUploadGoodNewPicApi(form).then((res) => {
        //
        if (res.errno === 0) {
          this.form.list_pic_url = res.data.fileUrl;
        }
        console.log(this.form.list_pic_url);
      });
    },

    // 封装 品牌接口过程
    getBrand() {
      // 品牌
      getAdminBrandApi({
        size: this.Brandsize,
      }).then((res) => {
        console.log(res.data);
        if (res.errno === 0) {
          this.Brandlist = res.data.data;
          this.Brandsize = res.data.count;
          for (var i = 0; i < res.data.data.length; i++) {
            this.options2.push({
              value: res.data.data[i].id,
              label: res.data.data[i].name,
            });
          }
        }
      });
    },
    //-----------编辑页----------------------------

    // ----------添加商品属性------------------------
    // 添加属性
    addset() {
        this.tableData.push({
          // 属性id
          attribute_id:'',
          // 属性值
          value: '',
          // 商品id
          goods_id:this.$route.query.id
        })
    },
    handleDelete(index){
      this.tableData.splice(index,1)
    },
    //封装获取商品属性过程
    getAttribute() {
      getAttributeApi({
        size: this.Attributesize,
      }).then((res) => {
        console.log(res);
        if (res.errno === 0) {
            console.log(res.data);
          for (var i = 0; i < res.data.data.length; i++) {
            this.options3.push({
              value: res.data.data[i].attribute_category_id,
              label: res.data.data[i].name,
            });
          }
        }
      });
    },

    // ------------富文本-----------------------
  },
  created() {
    // 分类
    getCategoryApi().then((res) => {
      console.log(res.data);
      if (res.errno === 0) {
        this.Categorylist = res.data;
        for (var i = 0; i < res.data.length; i++) {
          this.options1.push({
            value: res.data[i].id,
            label: res.data[i].name,
          });
        }
      }
    });
    // 品牌
    getAdminBrandApi({
      size: 8,
    }).then((res) => {
      if (res.errno === 0) {
        this.Brandlist = res.data.data;
        this.Brandsize = res.data.count;
        // 赋值全部品牌数据量
        this.getBrand();
        // 再次请求数据----获取全部的品牌数据
      }
    });

    //获取商品详情
    GetAdminGoodsInfoApi({
      id: this.$route.query.id,
    }).then((res) => {
      console.log(res);
      if (res.errno === 0) {
        //  this.form.category_id=res.data.

        //   this.form=res.data
        for (var i = 0; i < res.data.gallery.length; i++) {
          this.form.gallerys.push({
            url: res.data.gallery[i].img_url,
          });
        }

        this.form.name = res.data.name;
        this.form.goods_brief = res.data.goods_brief;
        this.form.goods_unit = res.data.goods_unit;
        this.form.retail_price = res.data.retail_price;
        this.form.goods_number = res.data.goods_number;
        this.form.sort_order = res.data.sort_order;
        this.form.primary_pic_url = res.data.primary_pic_url;
        this.form.list_pic_url = res.data.list_pic_url;
        this.form.category_id = res.data.category_id;
        this.form.brand_id = res.data.brand_id;
        this.form.is_new = res.data.is_new;
        this.form.is_hot = res.data.is_hot;
        this.form.is_delete = res.data.is_on_sale;
        this.tableData=res.data.attribute

        this.is_new = this.form.is_new == 1 ? true : false;
        this.is_hot = this.form.is_hot == 1 ? true : false;
        this.is_delete = this.form.is_delete == 1 ? true : false;
        console.log(this.form.primary_pic_url);
      }
    });

    // 获取商品属性
    getAttributeApi({
      size: 8,
    }).then((res) => {
      
      if (res.errno === 0) {
        this.Attributesize =res.data.count;
        //使用过程封装 获取全部的商品属性 不然一次只有8条
        this.getAttribute()
      }
    });
  },
};
</script>
 
<style lang = "less" scoped>
.avatar {
  display: block;
  height: 105px;
}
</style>